window.onload = function(){
    var content = document.getElementById('content');
    var allLis = content.getElementsByTagName("li");
    var ctl = document.getElementById('ctl');
    var prevBtn = ctl.getElementsByClassName('prev')[0];
    var nextBtn = ctl.getElementsByClassName('next')[0];
    var allIcons = ctl.getElementsByClassName('icon');
    var icon_wraper = document.getElementById('icon_wraper');
    var iNow = 0;
    // 动态添加下面条纹
    for (var i = 0; i < allLis.length; i++){
        var icon = document.createElement('div');
        icon.setAttribute('class','icon');
        icon.setAttribute('index',(i+""));
        icon_wraper.appendChild(icon);
    }
    allIcons[0].className = "icon selected"

    // 把图片全部放右边去
    for (var i = 1; i < allLis.length; i++){
        allLis[i].style.left = "520px";
    }

    // 监听右边按钮点击
    nextBtn.onclick = function(){
        next();  
    }


    // 监听左边按钮点击
    prevBtn.onclick = function(){
        startMove(allLis[iNow],{"left":520,});
        iNow--;
        if(iNow < 0){
            iNow = allLis.length -1;
        }
        allLis[iNow].style.left = "-520px"
        startMove(allLis[iNow],{"left":0,})
        changeLi(allIcons,iNow); 
    }
    // 监听li的点击事件
    for(var i = 0; i < allIcons.length; i++){
        (function(j){
            var icon = allIcons[j];
            icon.onclick = function(){
                var index = parseInt(icon.getAttribute('index'));
                if (index> iNow){
                    startMove(allLis[iNow],{"left":-520,});
                    allLis[index].style.left = "520px"
                    startMove(allLis[index],{"left":0,});  
                    iNow = index ;
                }else if(index < iNow){
                    startMove(allLis[iNow],{"left":520,});
                    allLis[index].style.left = "-520px"
                    startMove(allLis[index],{"left":0,});  
                    iNow = index ;
                    
            }
            changeLi(allIcons,iNow);
            }  
        }(i))

    }
        // 自动播放
        var timer = setInterval(function(){
            next();
        },1000)

        content.onmouseenter = function(){
            clearInterval(timer);
        }
        content.onmouseleave = function(){
            timer = setInterval(function(){
                next();
            },1000)
        }






        function next(){
            startMove(allLis[iNow],{"left":-520,});
            iNow++;
            if(iNow > allLis.length -1){
                iNow = 0;
            }
            allLis[iNow].style.left = "520px"
            startMove(allLis[iNow],{"left":0,})
            changeLi(allIcons,iNow);    
        }
}

function changeLi(allIcons,iNow){
    for (var i = 0; i < allIcons.length; i++){
    allIcons[i].className = "icon"
    }
    allIcons[iNow].className = "icon selected"


}